<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="navbar">
			<u-navbar :placeholder="true" :title="store.web_name" :autoBack="false">
				<view slot="left">
					<view class="home" @click="onToUser">
						<u-icon name="home" color="#fff" size="26"></u-icon>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="user" @click="is_popup = true">
			<view class="base">
				<view class="left">
					<view class="avatar">
						<u--image width="120rpx" height="120rpx"
							:src="userInfo.nickname == '默认昵称'?'https://img.alicdn.com/imgextra/i4/2064565174/O1CN01t0wFdm1o5k3CUm0Ig_!!2064565174.png':userInfo.avatar"
							shape="circle"></u--image>
					</view>
					<view class="info">
						<view class="nickname">{{ userInfo.nickname == '默认昵称'?'点击登录':userInfo.nickname }}</view>
						<view class="code">账号ID：{{ userInfo.id }}</view>
					</view>
				</view>
				<view class="edit">
					<u-icon name="setting" color="#fff" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="svip">
			<view class="service">
				<view class="text">1V1专人服务，极速提交备案</view> 
				<view class="btn">
					<u-button openType="contact" shape="circle" color="#A56725" text="联系专员"></u-button>
				</view>
			</view>
			<view class="grid">
				<u-grid :border="false" col="4">
					<u-grid-item>
						<u-icon name="/static/images/04aa16da676469a4e473158c2296242f.png" :size="32"></u-icon>
						<text class="grid-text">极速备案</text>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="/static/images/856386607de9719eec1f3bb0b21e93fd.png" :size="32"></u-icon>
						<text class="grid-text">通过率高</text>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="/static/images/4343221dfe0e0ae8c121dfa164598f48.png" :size="32"></u-icon>
						<text class="grid-text">专家辅导</text>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="/static/images/ed81cff600be0d9ab718a478b80832f7.png" :size="32"></u-icon>
						<text class="grid-text">全程跟进</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!--  -->
		<view class="steps">
			<view class="header" @click="onCourse">
				<u-cell-group :border="false">
					<u-cell :border="false" title="备案办理流程" value="查看备案材料" :isLink="true"></u-cell>
				</u-cell-group>
			</view>
			<view class="column">
				<u-steps direction="column">
					<u-steps-item title="验证备案类型" desc="填写主办单位证件号码和域名，验证所需备案类型"></u-steps-item>
					<u-steps-item title="创建主体信息" desc="填写主办者/主办单位信息"></u-steps-item>
					<u-steps-item title="填写备案信息" desc="填写小程序信息，进行视频核验并上传证件资料"></u-steps-item>
					<u-steps-item title="提交审核" desc="平台初审后提交管局审核，最长不超过20个工作日"></u-steps-item>
					<u-steps-item title="备案成功" desc="取得小程序的ICP备案号"></u-steps-item>
				</u-steps>
			</view>
		</view>
		<!-- 补充信息 -->
		<!-- 登录授权 -->
		<view class="modal">
			<u-popup :round="10" :show="is_popup" @close="is_popup = false" :closeable="true">
				<form @submit="formSubmit" catchreset="formReset">
					<view class="form">
						<view class="header">
							<view class="left">
								<view class="logo">
									<u--image radius="24" :showLoading="true" :src="store.logo" width="24px"
										height="24px">
									</u--image>
								</view>
								<view class="title">{{ store.web_name }}</view>
							</view>
						</view>
						<view class="remarks">
							<view class="title">设置您的头像、昵称</view>
							<view class="desc">用于展示用户信息</view>
						</view>
						<view class="info">
							<u-cell-group>
								<u-cell title="头像" :isLink="true">
									<view slot="value">
										<button class="btn-normal" open-type="chooseAvatar"
											@chooseavatar="onChooseAvatar">
											<!-- 如果有头像图片显示这个image，否则显示下面文字 -->
											<block v-if="userInfo.avatar">
												<image :src="userInfo.avatar" style="width: 81rpx; height: 81rpx;"
													class="avatar-default">
												</image>
											</block>
											<block v-else>
												<view class="placeholder">点此设置微信头像</view>
											</block>
										</button>
									</view>
								</u-cell>
								<u-cell title="昵称" :isLink="true">
									<view slot="value">
										<input v-model="userInfo.nickname" placeholder-class="placeholder"
											style="text-align: right;" type="nickname" name="nickname"
											placeholder="点此输入微信昵称" />
									</view>
								</u-cell>
							</u-cell-group>
						</view>
						<view class="start">
							<view class="btn refuse" @click="is_popup = false">
								<u-button throttleTime="3" color="#f4f4f5" text="拒绝"></u-button>
							</view>
							<view class="btn">
								<button style="margin: 0 0;background-color: #19be6b;" type="primary"
									formType="submit">确认</button>
							</view>
						</view>
					</view>
				</form>
			</u-popup>
		</view>
		<!--  -->
		<view class="submit" @click="onSubject">
			<view class="btn">
				<u-button shape="circle" type="primary" text="开始进入备案"></u-button>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="ad" v-if="spool['video'].status && spool['video'].status == 1">
			<ad :unit-id="spool['video'].ad_id" ad-type="video" ad-theme="white"></ad>
		</view>
		<!-- #endif -->
		<!-- 隐私协议 -->
		<xh-privacy title="隐私保护指引" theme="direction" background="rgba(0, 0, 0, .5)" color="#2979ff"></xh-privacy>
	</view>
</template>

<script>
	import {
		login,
		modify,
		detail
	} from "@/api/user.js";
	import {
		config,
		image
	} from "@/api/system.js";
	import {
		insert
	} from '@/utils/ad.js';
	export default {
		data() {
			return {
				is_popup: false,
				userInfo: {},
				store: {},
				share: {},
				spool: {}
			}
		},
		onLoad() {
			let _this = this
			_this.onLogin()
			setTimeout(() => {
				_this.getConfig()
			}, 1000)
			_this.getShare()
			_this.getSpool()
		},
		onShareTimeline() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.id) {
				referee_id = _this.userInfo.id
			}
			return {
				imageUrl: _this.share.share_image,
				title: _this.share.share_title,
				path: '/pages/main/index/index?referee_id=' + referee_id
			}
		},
		onShareAppMessage() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.id) {
				referee_id = _this.userInfo.id
			}
			return {
				imageUrl: _this.share.share_image,
				title: _this.share.share_title,
				desc: _this.share.share_desc,
				path: '/pages/main/index/index?referee_id=' + referee_id
			}
		},
		methods: {
			getSpool() {
				let _this = this
				config({
					key: 'liuliangzhu'
				}).then(res => {
					_this.spool = res.data.liuliangzhu
					if (_this.spool['interstitial'].status == 1) {
						insert.load(_this.spool['interstitial'].ad_id)
						insert.show()
					}
				}).catch(err => {

				})
			},
			getShare() {
				let _this = this
				config({
					key: 'share'
				}).then(res => {
					_this.share = res.data.share
				}).catch(err => {

				})
			},
			onCourse() {
				uni.navigateTo({
					url: '/pages/applet/course/course'
				})
			},
			getUser() {
				let _this = this
				detail({}).then(res => {
					_this.userInfo = res.data
				}).catch(err => {

				})
			},
			formSubmit(e) {
				let _this = this;
				if (!e.detail.value.nickname) {
					uni.showToast({
						icon: 'error',
						title: '昵称不能为空'
					});
					return false;
				}
				_this.is_popup = false;
				modify({
						avatar: _this.userInfo.avatar,
						nickname: e.detail.value.nickname
					})
					.then(res => {
						if (res.code == 200) {
							_this.$refs.uToast.show({
								type: 'success',
								message: '操作成功',
								complete() {
									_this.getUser()
								}
							});
						}
					})
					.catch(err => {});
			},
			async onChooseAvatar(e) {
				let _this = this
				let result = await image({
					file: e.detail.avatarUrl
				}).then(res => {
					return res;
				}).catch(err => {

				})
				console.log(result)
				_this.userInfo.avatar = result.url
			},
			getConfig() {
				let _this = this
				config({
					key: 'store'
				}).then(res => {
					_this.store = res.data.store
				}).catch(err => {

				})
			},
			onSubject() {
				let _this = this
				if (_this.userInfo.nickname == '默认昵称') {
					_this.is_popup = true
					return false;
				}
				uni.redirectTo({
					url: '/pages/main/user/index'
				})
			},
			onLogin() {
				let _this = this
				uni.login({
					success: (res) => {
						login({
							code: res.code,
							referee_id: uni.getStorageSync('referee_id')
						}).then(res => {
							uni.setStorageSync('token', res.data.token)
							uni.setStorageSync('user_id', res.data.userInfo.id)
							_this.getUser()
						})
					}
				})
			},
			onToUser() {
				let _this = this
				if (_this.userInfo.nickname == '默认昵称') {
					_this.is_popup = true
					return false;
				}
				uni.reLaunch({
					url: '/pages/main/user/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 160rpx;
	}


	.modal {
		.form {
			width: 86%;
			margin: 0 auto;
			padding: 30rpx 0rpx;

			.info {
				.placeholder {
					color: red;
					font-size: 28rpx;
				}

				.u-cell__body {
					padding: 30rpx !important;
				}
			}

			.start {
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-top: 50rpx;

				.btn {
					width: 40%;
					margin: 0rpx 15rpx;

					.u-button {
						height: 92rpx;
					}
				}

				.refuse {
					.u-button {
						color: #19be6b !important;
					}
				}
			}

			.remarks {
				margin: 50rpx 0rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.desc {
					color: #909399;
					margin-top: 15rpx;
				}
			}

			.header {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;

					.title {
						margin-left: 15rpx;
						color: #303133;
					}
				}
			}
		}
	}

	.submit {
		width: 100%;
		position: fixed;
		bottom: 30rpx;

		.btn {
			width: 90%;
			margin: 30rpx auto;

			.u-button {
				height: 100rpx;
			}
		}
	}

	.steps {
		width: 86%;
		margin: 0 auto;
		background-color: #fff;
		padding: 15rpx;
		border-radius: 15rpx;
		position: relative;
		top: -70rpx;

		.column {
			width: 95%;
			margin: 0 auto;

			.u-steps-item {
				padding-bottom: 20rpx !important;

				.u-text__value--main {
					font-size: 32rpx !important;
				}

				.u-text__value--tips {
					margin-top: 10rpx !important;
				}
			}
		}
	}

	.svip {
		width: 90%;
		margin: 0 auto;
		background-color: #fff;
		position: relative;
		border-radius: 25rpx;
		overflow: hidden;
		top: -100rpx;

		.service {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			background-image: url('../../../static/images/6f3bc57b9992ba814afd1e67bd2b531d.png');
			background-repeat: no-repeat;
			background-size: cover;
			height: 110rpx;

			.text {
				color: #A46726;
			}

			.btn {
				.u-button {
					height: 58rpx;
					font-size: 28rpx !important;
				}
			}
		}

		.grid {
			padding: 30rpx 0rpx;

			.grid-text {
				font-size: 26rpx;
				margin-top: 20rpx;
			}
		}
	}

	.u-status-bar {
		background-color: #2080F6 !important;
	}

	.u-navbar__content__title {
		color: #fff !important;
	}

	.u-navbar__content {
		background-color: #2080F6 !important;
	}

	.user {
		background-color: #2080F6;
		min-height: 290rpx;
		border-radius: 0rpx 0rpx 30% 30%;

		.base {
			width: 86%;
			margin: 0 auto;
			padding: 30rpx 0rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.info {
				margin-left: 15rpx;

				.nickname {
					color: #fff;
					font-size: 32rpx;
				}

				.code {
					font-size: 24rpx;
					color: #f4f4f5;
				}
			}
		}

	}
</style>